<script lang="ts">
import { defineComponent } from "vue";
import Top from "../../components/Top.vue";
import Content from "../../components/content.vue";
import Foot from "../../components/Foot.vue";
import GoodsList from "./GoodsList.vue";

// 1. 定义商品数据的类型（TypeScript 推荐，增强类型约束）
interface GoodsItem {
  id: number;
  name: string;
  link: string;
}

// 2. 定义数据并指定类型
const goodsList: GoodsItem[] = [
  { id: 1, name: "女装", link: "#women" },
  { id: 2, name: "男装", link: "#man" },
  { id: 3, name: "手机", link: "#phone" },
  { id: 4, name: "电脑", link: "#computer" },
  { id: 5, name: "运动", link: "#sport" },
];

export default defineComponent({
  // 3. 注册组件（简化写法：键值同名时可省略值）
  components: { Top, Content, Foot, GoodsList },
  // 4. 通过 setup 函数暴露数据给模板
  setup() {
    return {
      goodsList, // 把 goodsList 暴露出去，模板才能访问
    };
  },
});
</script>
<template>
  <Top></Top>
  <!-- 现在模板能拿到 goodsList 并传给子组件 -->
  <GoodsList :goodsList="goodsList"></GoodsList>
  <!-- <Content></Content>
  <Foot></Foot> -->
</template>
<style scoped></style>
